<template>
  <div>
    <Header />
    <div class="container">
      <div class="detail">
        <div class="left">
          <img src="@/static/images/detail/det02.jpg" alt="" />
          <div>
            <img src="@/static/images/detail/det01.jpg" alt="" />
            <img src="@/static/images/detail/det02.jpg" alt="" />
            <img src="@/static/images/detail/det03.jpg" alt="" />
            <img src="@/static/images/detail/det04.jpg" alt="" />
          </div>
        </div>
        <div class="right">
          <div>
            <p class="title">【最佳】非洲菊仿真花干花</p>
            <p class="desc">
              【破损补寄】
              【适合放室内、卧室、书房、餐桌、办公室、客厅、电视柜等地方】
              【无理由退换货】 【包邮】 【白色现代简约花瓶】
            </p>
            <p class="price">￥59.90</p>
          </div>
          <div>
            <p>颜色分类</p>
            <img src="@/static/images/detail/proBig01.jpg" alt="" />
            <img src="@/static/images/detail/proBig02.jpg" alt="" />
            <img src="@/static/images/detail/proBig03.jpg" alt="" />
            <img src="@/static/images/detail/proBig04.jpg" alt="" />
            <p>数量 库存<span>2609</span>件</p>
            <div>
              <el-button @click="reduce">-</el-button>
              <span>{{ num }}</span>
              <el-button @click="add">+</el-button>
            </div>
          </div>
          <div class="btns">
            <el-button>立即购买</el-button>
            <el-button>加入购物车</el-button>
          </div>
        </div>
      </div>
      <div class="recommend-evaluate">
        <div class="left">
          <el-tabs v-model="activeName">
            <el-tab-pane label="商品详情" name="first">
              <Detail />
            </el-tab-pane>
            <el-tab-pane label="所有评价" name="second">
              <Evaluate />
            </el-tab-pane>
          </el-tabs>
        </div>
        <div class="right">
          <div class="header">为你推荐</div>
          <ul>
            <li>
              <img src="@/static/images/detail/see01.jpg" alt="" />
              <p class="title">【最家】复古文艺风玻璃花瓶</p>
              <p class="price">￥192.90</p>
            </li>
            <li>
              <img src="@/static/images/detail/see02.jpg" alt="" />
              <p class="title">【最家】复古文艺风玻璃花瓶</p>
              <p class="price">￥192.90</p>
            </li>
            <li>
              <img src="@/static/images/detail/see03.jpg" alt="" />
              <p class="title">【最家】复古文艺风玻璃花瓶</p>
              <p class="price">￥192.90</p>
            </li>
            <li>
              <img src="@/static/images/detail/see04.jpg" alt="" />
              <p class="title">【最家】复古文艺风玻璃花瓶</p>
              <p class="price">￥192.90</p>
            </li>
          </ul>
        </div>
      </div>
    </div>
    <div class="like">
      <div class="main">
        <div class="header">猜你喜欢</div>
        <div class="carousel">
          <span @click="preImg">&lt;</span>
          <div>
            <ul id="carousel" style="left: 0px; top: 0px">
              <li v-for="item in likeDataSource" :key="item.id">
                <img
                  :src="require('@/static/images/detail/' + item.img)"
                  alt=""
                />
                <p class="title">{{ item.title }}</p>
                <p class="price">￥{{ item.price }}</p>
              </li>
            </ul>
          </div>

          <span @click="nextImg">&gt;</span>
        </div>
      </div>
    </div>
    <Tabbar />
    <Footer />
  </div>
</template>

<script lang="ts">
import { defineComponent, ref } from 'vue';
import Header from '@/components/header/index.vue';
import Footer from '@/components/footer/index.vue';
import Tabbar from '@/components/tabbar/index.vue';
import Detail from './components/detail.vue';
import Evaluate from './components/evaluate.vue';
// eslint-disable-next-line @typescript-eslint/no-var-requires
const likeData = require('@/mock/detail/like.json');

export default defineComponent({
  components: { Header, Footer, Tabbar, Detail, Evaluate },
  setup() {
    const activeName = ref('first');
    const likeDataSource = likeData.data;
    const num = ref(1);
    return {
      activeName,
      likeDataSource,
      num,
    };
  },
  methods: {
    preImg() {
      const el = document.getElementById('carousel');
      let left = parseInt(el?.style.left as string);
      if (left === 0) {
        console.log('已经是第一张了');
      } else {
        left += 236;
        el!.style!.left = left + 'px';
      }
    },
    nextImg() {
      const el = document.getElementById('carousel');
      let left = parseInt(el?.style.left as string);
      if (left <= -1180) {
        console.log('已经是最后一张了');
      } else {
        left -= 236;
        el!.style!.left = left + 'px';
      }
    },
    reduce() {
      if (this.num <= 1) return;
      this.num--;
    },
    add() {
      this.num++;
    },
  },
});
</script>

<style lang="scss" scoped>
.container {
  width: 1163px;
  margin: 0 auto;
  margin-top: 25px;

  .detail {
    display: flex;
    justify-content: space-between;
    margin-bottom: 32px;
    .left {
      width: 580px;
      img {
        width: 580px;
      }

      div {
        margin-top: 20px;
        img {
          width: 86px;
          height: 86px;
          margin-right: 20px;
        }
      }
    }

    .right {
      width: 500px;
      div {
        padding-bottom: 20px;

        &:nth-child(1),
        &:nth-child(2) {
          border-bottom: 1px solid #ddd;
        }

        .title {
          font-size: 22px;
          font-weight: 700;
          padding: 14px 0px;
        }

        .desc {
          font-size: 12px;
          color: #666;
        }

        .price {
          font-size: 22px;
          font-weight: 700;
          color: #c10000;
          line-height: 55px;
        }

        &:nth-child(2) {
          p {
            line-height: 72px;
          }

          img {
            width: 42px;
            margin-right: 26px;
          }

          span {
            display: inline-block;
            margin: 0 10px;
          }
        }
      }

      .btns {
        margin-top: 35px;
        display: flex;
        justify-content: space-between;

        ::v-deep .el-button {
          width: 170px;
          height: 40px;
          font-size: 12px;

          &:first-child {
            background-color: #c10000;
            color: #fff;
          }
        }
      }
    }
  }

  .recommend-evaluate {
    display: flex;
    justify-content: space-between;

    .left {
      width: 940px;
      border-top: 1px solid #ddd;
    }

    .right {
      width: 200px;

      .header {
        width: 100%;
        height: 40px;
        background-color: rgba(225, 225, 225, 0.5);
        text-align: center;
        line-height: 40px;
        font-size: 12px;
      }

      ul li {
        width: 160px;
        margin: 10px auto;
        cursor: pointer;

        p {
          font-size: 12px;
          line-height: 32px;
        }

        .title {
          font-weight: 700;
        }

        .price {
          color: #666;
        }
      }
    }
  }
}

.like {
  width: 100%;
  height: 400px;
  background-color: rgba(225, 225, 225, 0.3);
  margin-top: 10px;

  .main {
    width: 1297px;
    margin: 0 auto;

    .header {
      font-size: 16px;
      color: #333;
      line-height: 40px;
      text-align: center;
    }

    .carousel {
      display: flex;
      justify-content: space-between;
      align-items: center;
      span {
        font-size: 42px;
        font-weight: 700;
        display: block;
        cursor: pointer;
      }

      div {
        width: 1160px;
        height: 300px;
        overflow: hidden;
        position: relative;

        ul {
          display: flex;
          position: absolute;
          left: 0;
          top: 0;
          transition: all 0.5s linear;

          li {
            width: 216px;
            margin-right: 20px;
            cursor: pointer;

            p {
              margin-top: 14px;
            }

            .title {
              font-size: 12px;
              font-weight: 700;
            }

            .price {
              font-size: 14px;
              color: #c10000;
            }
          }
        }
      }
    }
  }
}
</style>
